import React from 'react';
import {getRealSize, Touchable} from '../../utils';
import {Platform, StyleSheet, View} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import FAIcon from 'react-native-vector-icons/FontAwesome';
import {I18n} from '../../reducers/intl';

class ImageViewScreen extends React.Component {
  static navigationOptions = () => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: I18n.t('page.title.imageView'),
  });

  state = {
    images: [],
  };

  componentDidMount() {
    const {navigation} = this.props;
    const images = navigation.getParam('images');
    if (images) {
      this.setState({images});
    }
  }

  render() {
    const {navigation} = this.props;
    return (
      <View style={Styles.container}>
        <View style={Styles.head}>
          <Touchable onPress={() => navigation.goBack()}>
            <View style={Styles.icon}>
              <FAIcon name="arrow-left" size={24} color="#757575" />
            </View>
          </Touchable>
        </View>
        {this.state.images && (
          <ImageViewer imageUrls={this.state.images || []} />
        )}
      </View>
    );
  }
}

export default ImageViewScreen;

const Styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  head: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    width: getRealSize(28),
    height: getRealSize(28),
    alignItems: 'center',
    justifyContent: 'center',
  },
});
